<template>
	<div style='background:#fff;padding:50px;'>
		<p style='font-size:16px;color:#464C5B;font-weight: 700;margin-bottom: 30px'>企业认证</p>
		<Form :label-width='120'>
    		<FormItem label='企业名称'>
                 <p slot='label'><span class='star'>*</span>企业名称</p>
    			<Input v-model='formItem.name' placeholder='请输入企业名称' style='width:354px'></Input>
    			<p style='font-size: 12px;color:#9DA7B1'>企业名称需和营业执照及银行对公账号的企业名称保持一致</p>
    		</FormItem>
    		<FormItem label='社会信用代码'>
                <p slot='label'><span class='star'>*</span>社会信用代码</p>
    			<Input v-model='formItem.creditNum' placeholder='请输入社会信用代码' style='width:354px'></Input>
    		</FormItem>
    		<FormItem label='执照扫描件'>
                <p slot='label'><span class='star'>*</span>执照扫描件</p>
    		    <div style='display: flex'>
                    <Upload
                        multiple
                        type="drag"
                        :action="getUrl('/home/image/upload')"
                        id='upload-file'
                        :on-success="handleAddSuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="5120"
                        :show-upload-list="false"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :headers="uploadHeaders()"
                        >
                        <div class='upload-file-wrap' v-if='!licenseId'>
                            <Icon type="ios-cloud-upload" color='#06A0FD' size='40' style='margin-top:20px'></Icon>
                            <div style='font-size:13px'>上传执照扫描件</div>
                        </div>
                        <div class='upload-file-wrap' v-else>
                            <img v-lazy="formItem.imgUrl" style='width:100%;height:100%'>
                            <div class="upload-file-cover">
                                <Icon type="ios-eye-outline" @click.native.stop="handleView"></Icon>
                                <Icon type="ios-trash-outline" @click.native.stop="handleRemove"></Icon>
                            </div>
                        </div>
                    </Upload>
                    <div style='margin-left: 100px;text-align: center'>
                        <img src="../../../images/qingfulrenzheng.png" style='width:66px;height:88px'>
                        <p style='font-size:20px;transform:scale(0.55)'>执照扫描件</p>
                    </div>   
                </div>
                <div style='width:354px;font-size:12px;color:#9DA7B1;line-height: 20px'>
                    请上传贵公司营业执照扫描件或复印件，均需加盖贵公司的企业公章。请确保图片清晰，图片大小不得超过5MB
                </div>
    		</FormItem>
    		<FormItem>
    			<div class='btn btn-hover' style='margin-top:16px' @click='authenticate'>认证</div>
    		</FormItem>
    	</Form>

        <Modal v-model="show_preview" width="600">
            <p slot="header">
                <span>文件预览</span>
            </p>
            <div>
                <img v-lazy="formItem.imgUrl" width="100%">
            </div>
            <div slot="footer">
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
                formItem:{
                    name:'',
                    creditNum:'',
                    imgUrl:''
                },
                licenseId:0,
                show_preview:false
			}
		},
		created(){
			// this.$bus.emit('updateMainMenuActive','1')
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData()
		},
        methods:{
            getData(){
                 this.fetch('/home/authenticate').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        let data = res.data.data;
                        this.formItem = data;
                        this.formItem.imgUrl = data.image.url;
                        this.formItem.name = data.company_name;
                        this.formItem.creditNum = data.credit_num;
                        this.licenseId = data.license_id;
                    }
                })
            },
            handleAddSuccess(res){
                if(res.code){
                    this.licenseId  = res.data.avater_id;
                    this.formItem.imgUrl = res.data.url;
                }
            },
            handleMaxSize(file) {
                this.$Notice.warning({
                    title: "超出文件大小限制",
                    desc: "文件 " + file.name + " 太大，不能超过 5M。"
                });
            },
            handleView(){
                this.show_preview = true;
            },
            handleRemove(){
                this.licenseId = 0;
            },
            sure(){
                this.show_preview = false;
            },
            authenticate(){
                if(!this.formItem.name){
                    this.$Message.warning('请输入企业名称')
                    return;
                }
                if(!this.formItem.creditNum){
                    this.$Message.warning('请输入社会信用代码')
                    return;
                }
                if(!this.licenseId ){
                    this.$Message.warning('请上传执照扫描件')
                    return;
                }
                this.fetch('/home/authenticate',{
                    name:this.formItem.name,
                    creditNum:this.formItem.creditNum,
                    licenseId:this.licenseId,
                }).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success('保存成功')
                    }
                })
            }
        }
	}
</script>
<style scoped>
   .upload-file-wrap{
        width:108px;
        height:102px;
        background:#F2F7FB;
        border-radius: 5px;
        position: relative;
    }
    .upload-file-cover{
        position: absolute;
        width: 100%;
        height: 30px;
        background: rgba(0,0,0,0.6);
        bottom: 0;
        display: none;
    }
    .upload-file-wrap:hover .upload-file-cover{
        display: block;
    }
    .upload-file-cover i{
        color:#fff;
        font-size: 20px;
        cursor:pointer;
        margin: 0 5px;
    }
    .upload-file-wrap div{
        width:150px;transform:scale(0.9);margin-left: -20px;margin-top: -8px
    }
</style>